<template>
  <div class="container">
    <!-- 顶部产品信息介绍 -->
    <PcPolicyHead :product="productMixins.productInfoData.value" />
    <!-- 顶部产品详情、投保须知、资料下载、信息披露 -->
    <PcTabView :tabDtos="productMixins.tabDtos.value" :piluInfo="productMixins.piluInfo.value" />


    <PcPolicyholder ref="policyholderRef" title="投保人信息" v-model="policyholderOption" />

    <PcInsured ref="insured" v-model="insureOption" :columns="singleOption" />

    <div class="bottom-div">
      <el-button style="width: 100%;" type="primary" @click.stop="saveEvt">保存</el-button>
    </div>
  </div>

</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { policyholderOption, singleOption, insureOption } from './config.ts'; // 导入共享状态
import productinfoClass from './productinfoClass.js'

const policyholderRef = ref()

const productCode = ref('AIGHSB2022CTH') // 产品code
const userId = ref('1') // 代理人id

const productMixins = productinfoClass.getInstance({ productCode: productCode.value, userId: userId.value });

onMounted(async () => {
  await productMixins.init()
  productMixins.dealwithProductData()
})

// 保存，提交表单
const saveEvt = async () => {
  console.log(policyholderOption.value, '投保人')
  console.log(insureOption.value, 1111)
  // 校验投保人
  const policyholderFlag = await policyholderRef.value.validParams()
  console.log(policyholderFlag, '投保人验证')
  if (!policyholderFlag) return

}

</script>

<style scoped>
@import url(./index.module.css);
</style>